<template>
  <div class="channel-edit">
  <van-cell :border="false">
    <div slot="title" class="title-text">我的频道</div>
    <van-button
        class="edit-btn"
      	size="mini"
        round
        type="danger"
        plain
        @click="isEdit=!isEdit"
        >{{isEdit?'完成':'编辑'}}
    </van-button>
</van-cell>
<van-grid  class='my-grid' :gutter="10">
        <van-grid-item
            class="grid-item"
            v-for="(channel,index) in myChannels"
            :key="index"
            @click="onMyChannelClick(channel,index)"
        >
        <template #icon>
            <van-icon v-show="isEdit && !fixedChannels.includes(channel.id)" name="clear"></van-icon>
        </template>
        <template #text>
            <span :class="{active:  index === active,text:true}"> {{ channel.name }}</span>
        </template>
        </van-grid-item>
</van-grid>
<!-- 频道推荐 -->
<van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
<van-grid class='recommend-grid' :gutter="10">
    <van-grid-item
         class="grid-item"
         v-for="(Allchannel,index) in recommendChannels"
         :key="index"
         icon='plus'
         :text="Allchannel.name"
         @click="onAddChannel(Allchannel)"
    />
</van-grid>
  </div>
</template>

<script>
// 引入获取所有频道的接口
import {getAllChannels,addUserChannel,deleteUserChannel} from '@/api/channel'
// 导入vuex中的mapState、storage中的方法，并且通过mapState映射user
import {mapState} from 'vuex'
import {setItem} from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    myChannels: {
      type: Array,
      required: true
    },
     active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
        AllChannels:[], // 获取所有频道列表
        isEdit:false,    //用于编辑状态的切换
        fixedChannels:[0]  // 固定频道，不允许删除
    }
  },
  computed: {
      // 映射user到当前vue实例
      ...mapState(['user']),
      // 处理展示推荐频道
      recommendChannels(){
       	// 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组中并返回
        return this.AllChannels.filter(channel => {
        // const channels = []
        // 数组的 find 方法：遍历数组，把符合条件的第1个元素返回
        return !this.myChannels.find(myChannel => {
            return myChannel.id === channel.id
        })
    })
      }
  },
  watch: {},
  created () {
      // 页面一打开，就获取所有频道信息
      this.loadAllChannels()
  },
  mounted () {
  },
  methods: {
      async loadAllChannels(){
        try {
            const {data} = await getAllChannels()
            this.AllChannels = data.data.channels
        }catch (err) {
            this.$toast('获取频道列表数据失败')
        }
      },
      // 增加频道功能
      async onAddChannel(Allchannel){
          this.myChannels.push(Allchannel)
          // 已登录 数据存储到线上
          if(this.user) {
              try {
                  await addUserChannel({
                      id:Allchannel.id, // 频道Id
                      sep:this.myChannels.length // 频道的 序号
                  })
                this.$toast('添加成功')
              }catch (err) {
                  this.$toast('保存失败')
              }
          }else { 
              // 未登录
              setItem('TOUTIAO_CHANNELS',this.myChannels)
          }
      },
      // 切换频道功能
      onMyChannelClick(channel,index) {
           // 编辑状态 删除频道
          if(this.isEdit) {
              // 1.如果是固定频道，则不删除
              if(this.fixedChannels.includes(channel.id)) {
                  return 
              }
              // 2.删除当前频道
              this.myChannels.splice(index,1)
              // 3.如果删除的激活频道之前的频道，则更新激活的频道项
              // 参数1：要删除的元素的开始索引（包括）
              // 参数2：删除的个数，如果不指定，则从参数1开始一直删除到最后
              if(index<=this.active) {
                  // 让激活频道的 索引 -1
                  this.$emit('update-active',this.active-1,true) // 当前频道删除，上个频道高亮，不关闭弹出层
              }
               // 4. 处理持久化 (添加这行代码)
                this.deleteChannel(channel)
          }else {
              // 非编辑状态，执行切换频道
              this.$emit('update-active',index,false)
          }
      },
      // 删除频道功能
      async deleteChannel (channel) {
          try {
              if(this.user) {
                  // 已登录，将数据存储到线上
                  await deleteUserChannel(channel.id)
              }else {
                  // 未登录，将数据存储到本地
                  setItem('TOUTIAO_CHANNELS',this.myChannels)
              }
          }catch (err) {
              console.log(err);
              this.$toast('删除频道失败，请稍后再试')
          }
      }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
	padding: 85px 0;
    .title-text {
		font-size: 32px;
		color: #333333;
	}
    
	 .edit-btn {
		width: 104px;
		height: 48px;
		font-size: 26px;
		color: #f85959;
		border: 1px solid #f85959;
	}
}
/deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
        white-space: nowrap;
        background-color: #f4f5f6;
        .van-grid-item__text {
            font-size: 28px;
            color: #222;
            /* 添加margin-top:0 */
            margin-top: 0;
        }
        .text  {
            font-size: 28px;
            color: #222;
            margin-top: 0;
        }
        // 高亮文字红色
        .active {
            color: red;
        }
    }
    /* 在.grid-item 新增这一行代码 去除定位设置 */
        .van-grid-item__icon-wrapper {
            position: unset;
        }
}
/deep/ .recommend-grid {
    .grid-item {
        .van-grid-item__content {
            flex-direction: row;
            .van-icon-plus {
                font-size: 28px;
                margin-right: 6px;
            }
            // .van-grid-item__text {
            //     margin-top: 0;
            // }
        }
    }
}
/deep/ .my-grid {
    .grid-item {
        .van-icon-clear {
            position: absolute;
            right: -10px;
            top: -10px;
            font-size: 30px;
            color: #cacaca;
            z-index: 2;
        }
    }
}
</style>